<template>
<div class="home-container">
<van-nav-bar class="page-nav-bar">
    <template #right>
        <van-button
            type="info"
            size="small"
            round
            icon="search"
            class="search-button"
        >search</van-button>
    </template>
</van-nav-bar>
<van-tabs class="channels-tabs" v-model:active="active">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
        <van-tab title="标签 5">内容 5</van-tab>
        <van-tab title="标签 6">内容 6</van-tab>

    <template #nav-right>
        <i class="placeholder"></i>
        <van-icon name="wap-nav" class="hamburger-btn" ></van-icon>
    </template>
</van-tabs>
</div>
</template>

<script >
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>

<style>
.home-container .search-button{
    width: 300px;
    height: 30px;
    background-color: #5babfb;
    border: none;
    font-size: 18px;
    color: #fff;
}
.channels-tabs .hamburger-btn{
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width:66px;
    height: 32px;
    background-color: #fff;
    opacity: 0.902;
    font-size: 23px;
}
.channels-tabs .placeholder{
    flex-shrink: 0;
    width: 66px;
    height: 32px;
}
</style>